<template>
    <h2>会员绑定</h2>
  
    <!-- 会员绑定表单 -->
    <el-form :model="bindForm">
      <el-form-item label="查找会员">
        <!-- 查找会员 -->
        <el-autocomplete
          v-model="searchQuery"
          :fetch-suggestions="fetchSuggestions"
          placeholder="输入姓名"
          @select="handleSelect"
          style="margin-bottom: 20px; width: 300px;"
        />
      </el-form-item>
  
      <el-form-item label="会员卡类型">
        <el-radio-group v-model="bindForm.cardType">
          <el-radio label="金卡"></el-radio>
          <el-radio label="银卡"></el-radio>
          <el-radio label="彩卡"></el-radio>
        </el-radio-group>
      </el-form-item>
  
      <el-form-item label="充值次数">
        <el-input v-model="bindForm.rechargeTimes" type="number"></el-input>
      </el-form-item>
  
      <el-form-item label="有效期">
        <el-date-picker v-model="bindForm.expiryDate" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
  
      <el-form-item label="实收金额">
        <el-input v-model="bindForm.amountReceived" type="number"></el-input>
      </el-form-item>
  
      <el-form-item label="支付方式">
        <el-select v-model="bindForm.paymentMethod" placeholder="选择支付方式">
          <el-option label="支付宝" value="支付宝"></el-option>
          <el-option label="微信" value="微信"></el-option>
        </el-select>
      </el-form-item>
  
      <el-form-item label="备注">
        <el-input v-model="bindForm.note"></el-input>
      </el-form-item>
  
      <el-form-item>
        <el-button type="primary" @click="submitForm">确认</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { getUsersList } from '@/api/Membership';
  import { bindMembership } from '@/api/MembershipBinding';
  
  const searchQuery = ref('');
  const bindForm = ref({
    cardType: '',
    rechargeTimes: 0,
    expiryDate: '',
    amountReceived: 0,
    paymentMethod: '',
    note: ''
  });
  
  const fetchSuggestions = async (queryString, cb) => {
  console.log('Fetching suggestions for:', queryString);
  if (queryString) {
    try {
      const res = await getUsersList();
      console.log('Fetched users:', res.data);
      const users = res.data.filter(user =>
        user.name.toLowerCase().includes(queryString.toLowerCase()) ||
        user.phone.includes(queryString)
      );
      console.log('Filtered users:', users);
      cb(users.map(user => ({
        value: user.name, 
        name: user.name,   
      })));
    } catch (error) {
      console.error('Error fetching users:', error);
      cb([]);
    }
  } else {
    cb([]);
  }
};

const handleSelect = (item) => {
  console.log('Selected item:', item);
  searchQuery.value = item.name;
};
  const submitForm = async () => {
    console.log('Submitting form with:', bindForm.value);
    try {
      bindForm.value.note = `已选择会员：${searchQuery.value}`;
      const res = await bindMembership(bindForm.value);
      console.log('Form submission response:', res);
      if (res.data.success) {
        alert('绑定成功');
      } else {
        alert('绑定失败');
      }
    } catch (error) {
      console.error('Error binding membership:', error);
    }
  };
  
  const resetForm = () => {
    searchQuery.value = '';
    bindForm.value = {
      cardType: '',
      rechargeTimes: 0,
      expiryDate: '',
      amountReceived: 0,
      paymentMethod: '',
      note: ''
    };
    console.log('Form reset:', bindForm.value);
  };
  </script>
  
  <style scoped>
  .autocomplete {
    position: relative;
    z-index: 1000; /* 确保下拉框显示在其他元素之上 */
  }
  </style>
  